<template>
  <page-header-wrapper>
    <page-tab-list></page-tab-list>
    <a-card :bordered="false">
      <div class="table-operator" style="float: right">
          <a-button type="primary" style="margin-bottom: 0px;" @click="onEdit" icon="plus">新增</a-button>
      </div>
      <a-divider />
      <a-table
        ref="table"
        size="default"
        row-key="id"
        :columns="columns"
        :data-source="loadData"
        :pagination="false"
      >
        <a-space slot="price" slot-scope="text">
          {{ text }}
        </a-space>
        <span slot="action" slot-scope="text, item">
          <a-button type="link" @click="onEdit(item.id)" size="small">编辑</a-button>
          <a-divider type="vertical" />
          <a-button type="link" @click="onConfirmStatus('is_delete', item.id)"  size="small">删除</a-button>
        </span>
      </a-table>
    </a-card>
    <a-modal
      title="规则详情"
      @cancel="onClose"
      @ok="onSave"
      okText="保存"
      :destroyOnClose="true"
      :visible="visible">
      <a-row v-if="loading" style="text-align: center;"><a-spin /></a-row>
      <template v-else>
        <a-row :gutter="[16,30]" type="flex" align="middle">
          <a-col class="required" :span="5" style="text-align: right;">
            规则名称：
          </a-col>
          <a-col :span="16">
            <a-input placeholder="请填写规则名称" v-model="free.name" />
          </a-col>
        </a-row>
        <a-row :gutter="[16,30]" type="flex" align="middle">
          <a-col :span="5" style="text-align: right;">
            金额：
          </a-col>
          <a-col :span="16">
            <a-input placeholder="请填写包邮金额" type="number" step="0.01" v-model="free.price" />
          </a-col>
        </a-row>
        <a-row :gutter="[16,30]" type="flex" align="top">
          <a-col :span="5" style="text-align: right;">
            包邮规则：
          </a-col>
          <a-col :span="16">
            <a-card size="small" style="margin-bottom: 10px;" v-if="city_list && city_list.length > 0">
              <a-row type="flex">
                <a title="删除" @click="delCity(index)" style="margin-right: 10px;" v-for="(item,index) of city_list" :key="index">
                  {{ item.name }}
                </a>
              </a-row>
            </a-card>
            <a-button @click="showInfo" icon="plus" size="small">
              新增条目
            </a-button>
          </a-col>
        </a-row>
      </template>
      <a-modal v-model="showInfoStatus" v-if="district.length > 0" :width="700" title="添加运费规则" @ok="handleOk">
        <a-row>
          <a-tree
            style="display: flex;flex-wrap: wrap;"
            :blockNode="true"
            :checkable="true"
            @check="e => onSelectCheck(e)"
            multiple>
            <a-tree-node
              :style="{ width: '33%', display: 'flex', flexWrap: 'wrap' }"
              v-for="(province) of district"
              :key="JSON.stringify({ id: province.id, name: province.name, type: 'province' })"
              :title="province.name">
              <a-tree-node
                v-for="(city) of province.cityAll"
                :isLeaf="true"
                :key="JSON.stringify({ id: city.id, name: city.name, type: 'city' })"
                :title="city.name">
              </a-tree-node>
            </a-tree-node>
          </a-tree>
        </a-row>
      </a-modal>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import { List, Edit, Save, Del } from '@/api/setting/free'
import { STable } from '@/components'

const columns = [
  {
    title: '规则名称',
    dataIndex: 'name'
  },
  {
    title: '金额',
    dataIndex: 'price',
    scopedSlots: { customRender: 'price' }
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '150px',
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  name: 'FreeDelivery',
  components: {
    STable
  },
  data () {
    return {
      columns: columns,
      loading: false,
      visible: false,
      showInfoStatus: false, // 是否展示地区
      city_list: [],
      free: { name: '', type: 1 },
      district: [],
      selectData: [], // 选中的数据
      loadData: []
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList (parameter) {
      this.loadData = null
      return List(parameter)
      .then(res => {
        this.loadData = res.data.list
      })
    },
    onEdit (id) {
      this.visible = true
      this.loading = true
      this.selectData = []
      this.city_list = []
      Edit({ id: id }).then(res => {
        this.city_list = res.data.model && res.data.model.city !== 'null' ? JSON.parse(res.data.model.city) : []
        this.district = res.data.district
        this.free = res.data.model ? res.data.model : { name: '', type: 1 }
        this.loading = false
      })
    },
    onSave (id) {
      if (this.free.name) {
        this.$message.loading({ content: '提交中', key: 'updatable' })
        Save({ free: this.free, city_list: this.city_list }).then(res => {
          if (res.code === 0) {
            this.$message.success({ content: res.msg, key: 'updatable' })
            this.$nextTick(() => {
              this.visible = false
              this.selectData = []
              this.city_list = []
              this.getList()
            })
          } else {
            this.$message.error({ content: res.msg, key: 'updatable' })
          }
        })
      } else {
        this.$message.error('请填写名称')
      }
    },
    onClose () {
      this.visible = false
      this.loading = false
      this.city_list = []
      this.district = []
      this.postage = { name: '' }
    },
    onSelectCheck (value) {
      var arr = []
      value.forEach(element => {
        if (JSON.parse(element).type === 'city') {
          arr.push(JSON.parse(element))
        }
      })
      this.selectData = arr
    },
    showInfo () {
      this.showInfoStatus = true
    },
    handleOk () {
      this.showInfoStatus = false
      this.city_list = this.unique(this.city_list.concat(this.selectData))
    },
    onConfirmStatus (type, id) {
      var that = this
      this.$confirm({
        content: '是否确认删除',
        onOk () {
          Del({ id: id }).then(res => {
            if (res.code === 0) {
              that.getList()
              that.$message.success(res.msg)
            } else {
              that.$message.error(res.msg)
            }
          })
        }
      })
    },
    delCity (index) {
      this.city_list.splice(index, 1)
    },
    unique (arr) {
      var hash = []
      var hashObj = []
      for (var i = 0; i < arr.length; i++) {
        if (hash.indexOf(JSON.stringify(arr[i])) === -1) {
          hash.push(JSON.stringify(arr[i]))
          hashObj.push(arr[i])
        }
      }
      return hashObj
    }
  }
}
</script>
<style lang="less" scoped>
.required::before {
  content: '*';
  color: red;
}
</style>
